<template>
	 <el-table :data="rank" stripe style="width: 100%">
		 <el-table-column type="index"/>
		 <el-table-column label="song" min-width="600%">
			 <template #default="scope">
					 <div class="songInfo">
						 <el-image :src="scope.row.img" class="img">
							 <template #error>
								 <div class="image-slot">
									 <!-- 123占位图 -->
								 </div>
							 </template>
						 </el-image>
						 <span class="word">
								<a class="name" href="#">{{ scope.row.name }}</a>
								<span v-if="scope.row.des" class="des">{{ scope.row.des }}</span>
								<a class="mvIcon" v-if="scope.row.mv" href="#">
									 <svg aria-hidden="true">
										 <use xlink:href="#icon-MV"></use>
									 </svg>
								</a>
						 </span>
						 <span class="buttons">
								 <a class="relayIcon" href="#"></a>
								 <a class="addIcon" href="#"></a>
								 <a class="shareIcon" href="#"></a>
						 </span>
					 </div>
			 </template>
		 </el-table-column>
		 <el-table-column prop="singer" label="singer" min-width="150%">
			 <template #default="scope">
				 <a class="singer" href="#">{{ scope.row.singer }}</a>
			 </template>
		 </el-table-column>
		 <el-table-column prop="time" label="time"/>
		 
	 </el-table>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
        rank:[
					{img:require("../../../../assets/logo.png"),des:"<英雄联盟：双城之战》动画啊啊啊",mv:"url...",name:"你是一个一个一个啊啊啊",singer:"The chainsmoke",time:"00:11"},
										{img:require("../../../../assets/logo.png"),des:"<英雄联盟：双城之战》动画啊啊啊",mv:"url...",name:"你是一个一个一个啊啊啊",singer:"The chainsmoke",time:"00:11"},
															{img:require("../../../../assets/logo.png"),des:"<英雄联盟：双城之战》动画啊啊啊",mv:"url...",name:"你是一个一个一个啊啊啊",singer:"The chainsmoke",time:"00:11"}
				]
      }
    },
    computed:{
      showGoods(){
        return 0
      }
    },
    props:{
      imgLink:{
        type:String,
        default(){
          return ""
        }
      }
    },
    methods:{
      test(){
        
      }
    },
    components:{
       
    },
    created(){
      
    },
    activated(){
    
    },
    mounted(){
    
    },
    updated(){
      
    },
    deactivated(){
    
    },
    destroyed(){
    
    },
  }
</script>

<style scoped>
	.songInfo{
		display: flex;
		align-items: center;
	}
	.word,.des,.img,.buttons,.mvIcon{
		margin: 5px;
	}
	.img{
		height: 70px;
		width: 70px;
	}
	.word{
		flex: 7;
		display: flex;
		align-items: center;
		text-align: center;
	}
	.name,.des{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.des{
		color: var(--font-grey);
	}
	.name:hover,.singer:hover{
		color: var(--bcc-green);
	}
	.mvIcon,.buttons{
		display: flex;
		align-items: center;
	}
	.mvIcon svg{
		height: 33px;
		width: 33px;
	}
	.buttons{
		flex: 2;
		opacity: 0;
	}
	tr:hover .buttons{
		transition: all 0.5s;
		opacity: 1;
	}
	.relayIcon,.addIcon,.shareIcon{
		display: inline-block;
		background: url(../../../../assets/img/icon_list_menu.png);
		width: 40px;
		height: 40px;
		margin: 0 1px;
	}
	.relayIcon{
		background-position: 0px 0px;
	}
	.relayIcon:hover{
		background-position: -40px 0px;
	}
	.addIcon{
		background-position: 0px -80px;
	}
	.addIcon:hover{
		background-position: -40px -80px;
	}
	.shareIcon{
		background-position: 0px -40px;
	}
	.shareIcon:hover{
		background-position: -40px -40px;
	}
</style>
